
<script>
/**
 * <template>
  <div class="t-view-list" :class="ctypeCls">
    <div
      class="t-view-cell tv-bor"
      v-for="(contractArr, index) in list"
      :key="index"
    >
      <slot
        v-for="contract in contractArr"
        :key="contract.pos"
        :c="contract"
        :c1="contract.data[0]"
      >
        {{ c1[display] }}
      </slot>
    </div>
  </div>
</template>
 */
// import Collection from "./Collection";
export default {
  name: "TViewList",
  // mixins: [Collection],
  props: ["ctype", "list"],
  data() {
    return {
      title: "合约T表",
    };
  },
  inject: ["parentVM"],
  computed: {
    ctypeCls() {
      let cls = this.ctype === "pull" ? "t-view-list-pull" : "t-view-list-call";
      return {
        [cls]: true,
      };
    },
    style() {
      return {
        width: this.parentVM.closingDate.length * 80 + "px",
      };
    },
  },
  methods: {
    /**
     * 合约的作用域插槽
     * @param {Object} c -合约对象({pos, data: [c1, c2]})
     * @return this.$scopedSlots.default({ c, c1 }) || '--'
     */
    contractSlot(c) {
      let def = this.$scopedSlots.default;
      let c1 = c.data[0];
      return typeof def == "function"
        ? def({ c, c1 })
        : c1
        ? c1[this.parentVM.display]
        : "--";
    },
  },
  render() {
    let cells = this.list.map((contractArr) => {
      return contractArr.map((contract) => {
        return (
          <div
            class={[
              "t-view-cell",
              "tv-bor",
              contract.data.length > 1 ? "tv-repeat" : "",
            ]}
          >
            {this.contractSlot(contract)}
          </div>
        );
      });
    });
    return (
      <div style={this.style} class={["t-view-list", this.ctypeCls]}>
        {cells}
      </div>
    );
  },
};
</script>